<template>
  <div class="input-page">
    <v-header isBack title="求职信息" />
    <div class="input-group">
      <div class="input-item clearfix">
        <div class="lable require fl">手机号码:</div>
        <div class="input-box fr">
          {{ telPhone }}
          <!-- <input type="tel" maxlength="11" disabled :value="telPhone" placeholder="请输入" /> -->
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable require fl">姓名:</div>
        <div class="input-box fr">
          <input type="text" maxlength="11" v-model="name" placeholder="请输入" />
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable require fl">身份证号码:</div>
        <div class="input-box fr">
          <input type="tel" maxlength="18" v-model="idCardNum" placeholder="请输入" />
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable require fl">年龄:</div>
        <div class="input-box fr">
          <input type="tel" maxlength="3" v-model="age" placeholder="请输入" />
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable require fl">性别:</div>
        <div class="input-box fr" id="selectSex">
          <span class="toSelect" :style="{ color: selectedSexStr ? '#333' : '' }">{{
            selectedSexStr || '请选择>'
          }}</span>
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable require fl">专业特长:</div>
        <div class="input-box fr">
          <input type="text" v-model="specialty" placeholder="请输入" />
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable require fl">工作经验:</div>
        <div class="input-box fr" id="selectExp">
          <span class="toSelect" :style="{ color: selectedExpStr ? '#333' : '' }">{{
            selectedExpStr || '请选择>'
          }}</span>
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable  fl">月薪要求:</div>
        <div class="input-box fr">
          <input type="text" v-model="moneyNeed" placeholder="请输入" />
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable  fl">岗位要求:</div>
        <div class="input-box fr">
          <input type="text" v-model="jobNeed" placeholder="请输入" />
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable  fl">文化程度:</div>
        <div class="input-box fr" id="selectWh">
          <span class="toSelect" :style="{ color: selectedWhStr ? '#333' : '' }">{{
            selectedWhStr || '请选择>'
          }}</span>
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable  fl">政治面貌:</div>
        <div class="input-box fr" id="selectZzmm">
          <span class="toSelect" :style="{ color: selectedZzmmStr ? '#333' : '' }">{{
            selectedZzmmStr || '请选择>'
          }}</span>
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable  fl">婚姻状况:</div>
        <div class="input-box fr" id="selectMarriage">
          <span class="toSelect" :style="{ color: selectedMarriageStr ? '#333' : '' }">{{
            selectedMarriageStr || '请选择>'
          }}</span>
        </div>
      </div>
      <div class="input-item clearfix">
        <div class="lable  fl">家庭住址:</div>
        <div class="input-box fr">
          <input type="text" v-model="address" placeholder="请输入" />
        </div>
      </div>
      <button class="save-btn" :class="check ? 'active' : ''" @click="saveUserInfo">
        保存信息
      </button>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header.vue'
export default {
  data() {
    return {
      telPhone: '',
      name: '',
      idCardNum: '',
      age: '',
      specialty: '',
      moneyNeed: '',
      jobNeed: '',
      address: '',
      // 选择的性别
      selectedSexStr: '',
      selectedSexId: '',
      // 选择的工作经验
      selectedExpStr: '',
      selectedExpId: '',
      // 选择的文化程度
      selectedWhStr: '',
      selectedWhId: '',
      // 选择的政治面貌
      selectedZzmmStr: '',
      selectedZzmmId: '',
      // 选择的婚姻状况
      selectedMarriageStr: '',
      selectedMarriageId: '',
      sexList: [],
      expList: [],
      whList: [],
      zzmmList: [],
      marriageList: []
    }
  },
  computed: {
    check() {
      return (
        this.name &&
        this.idCardNum &&
        this.age &&
        this.selectedSexStr &&
        this.specialty &&
        this.selectedExpStr
      )
    }
  },
  components: {
    'v-header': Header
  },
  created() {},
  mounted() {
    this.$store
      .dispatch('getUserInfo')
      .then((res) => {
        this.init()
        if (res.httpStatusCode === 200 && res.success) {
          const data = res.model
          this.telPhone = data.phone
          this.name = data.name || ''
          this.idCardNum = data.idCardNo || ''
          this.age = data.age || ''
          this.specialty = data.major || ''
          this.selectedSexStr = data.genderDes
          this.selectedSexId = data.gender
          this.selectedExpStr = data.experienceDes
          this.selectedExpId = data.experience || ''
          this.moneyNeed = data.salary || ''
          this.jobNeed = data.jobRequire || ''
          this.selectedWhStr = data.educationDes
          this.selectedWhId = data.education || ''
          this.selectedZzmmStr = data.politicDes
          this.selectedZzmmId = data.politic || ''
          this.selectedMarriageStr = data.marriedDes
          this.selectedMarriageId = data.married || ''
          this.address = data.address || ''
        }
      })
      .catch(() => {
        this.init()
      })
  },
  methods: {
    init() {
      this.getSexList()
      this.getPoliticsList()
      this.getEducationsList()
      this.getExpList()
      this.getMarriesList()
    },
    // 性别
    getSexList() {
      let self = this
      self.$http.getSexList().then((res) => {
        if (res.httpStatusCode === 200 && res.success) {
          self.sexList = res.model.genders.filter((item) => {
            return item.text !== '不限'
          })
          // eslint-disable-next-line no-undef
          $('#selectSex')
            .mobiscroll()
            .select({
              theme: 'ios', //皮肤样式
              display: 'bottom', //对齐
              mode: 'scroller', //选择模式：弹出
              lang: 'zh',
              data: self.sexList,
              defaultValue: '男',
              setText: '确定', //确认按钮名称
              cancelText: '取消', //取消按钮名籍我
              showLabel: false,
              // headerText: '姓名',
              onSet: function(event, inst) {
                self.selectedSexStr = event.valueText
                self.selectedSexId = inst.getVal()
              }
            })
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 政治面貌
    getPoliticsList() {
      let self = this
      self.$http.getPoliticsList().then((res) => {
        if (res.httpStatusCode === 200 && res.success) {
          let result = res.model.politics
          result.unshift({
            text: '请选择',
            value: ''
          })
          self.zzmmList = result
          // eslint-disable-next-line no-undef
          $('#selectZzmm')
            .mobiscroll()
            .select({
              theme: 'ios', //皮肤样式
              display: 'bottom', //对齐
              mode: 'scroller', //选择模式：弹出
              lang: 'zh',
              data: self.zzmmList,
              defaultValue: '请选择',
              setText: '确定', //确认按钮名称
              cancelText: '取消', //取消按钮名籍我
              showLabel: false,
              onSet: function(event, inst) {
                self.selectedZzmmStr = inst.getVal() ? event.valueText : ''
                self.selectedZzmmId = inst.getVal()
              }
            })
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 获取教育程度列表
    getEducationsList() {
      let self = this
      self.$http.getEducationsList().then((res) => {
        if (res.httpStatusCode === 200 && res.success) {
          let result = res.model.educations
          result.unshift({
            text: '请选择',
            value: ''
          })
          self.whList = result
          // eslint-disable-next-line no-undef
          $('#selectWh')
            .mobiscroll()
            .select({
              theme: 'ios', //皮肤样式
              display: 'bottom', //对齐
              mode: 'scroller', //选择模式：弹出
              lang: 'zh',
              data: self.whList,
              defaultValue: '请选择',
              setText: '确定', //确认按钮名称
              cancelText: '取消', //取消按钮名籍我
              showLabel: false,
              onSet: function(event, inst) {
                self.selectedWhStr = inst.getVal() ? event.valueText : ''
                self.selectedWhId = inst.getVal()
              }
            })
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 获取经验列表
    getExpList() {
      let self = this
      self.$http.getExpList().then((res) => {
        if (res.httpStatusCode === 200 && res.success) {
          self.expList = res.model.experiences
          // eslint-disable-next-line no-undef
          $('#selectExp')
            .mobiscroll()
            .select({
              theme: 'ios', //皮肤样式
              display: 'bottom', //对齐
              mode: 'scroller', //选择模式：弹出
              lang: 'zh',
              data: self.expList,
              defaultValue: '无经验',
              setText: '确定', //确认按钮名称
              cancelText: '取消', //取消按钮名籍我
              showLabel: false,
              // headerText: '姓名',
              onSet: function(event, inst) {
                self.selectedExpStr = inst.getVal() ? event.valueText : ''
                self.selectedExpId = inst.getVal()
              }
            })
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 获取结婚情况列表
    getMarriesList() {
      let self = this
      self.$http.getMarriesList().then((res) => {
        if (res.httpStatusCode === 200 && res.success) {
          let result = res.model.marries
          result.unshift({
            text: '请选择',
            value: ''
          })
          self.marriageList = result
          // eslint-disable-next-line no-undef
          $('#selectMarriage')
            .mobiscroll()
            .select({
              theme: 'ios', //皮肤样式
              display: 'bottom', //对齐
              mode: 'scroller', //选择模式：弹出
              lang: 'zh',
              data: self.marriageList,
              defaultValue: '请选择',
              setText: '确定', //确认按钮名称
              cancelText: '取消', //取消按钮名籍我
              showLabel: false,
              onSet: function(event, inst) {
                self.selectedMarriageStr = inst.getVal() ? event.valueText : ''
                self.selectedMarriageId = inst.getVal()
              }
            })
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    checked() {
      // eslint-disable-next-line no-undef
      if (!checkFormat.isCName(this.name, 5)) {
        this.$message({
          message: '请输入2-5位汉字姓名',
          type: 'warning'
        })
        return false
      }
      if (!this.idCardNum) {
        this.$message({
          message: '请输入身份证号码',
          type: 'warning'
        })
        return false
      }
      if (!/^\+?[1-9][0-9]*$/.test(this.age)) {
        this.$message({
          message: '请输入正确的年龄',
          type: 'warning'
        })
        return false
      }
      if (!this.selectedSexStr) {
        this.$message({
          message: '请选择性别',
          type: 'warning'
        })
        return false
      }
      if (!this.specialty) {
        this.$message({
          message: '请输入专业特长',
          type: 'warning'
        })
        return false
      }
      if (!this.selectedExpStr) {
        this.$message({
          message: '请选择工作经验',
          type: 'warning'
        })
        return false
      }
      return true
    },
    // 保存信息
    saveUserInfo() {
      if (this.checked()) {
        this.$http
          .saveUserInfo({
            address: this.address,
            age: this.age,
            education: this.selectedWhId,
            experience: this.selectedExpId,
            gender: this.selectedSexId,
            idCardNo: this.idCardNum,
            jobRequire: this.jobNeed,
            major: this.specialty,
            married: this.selectedMarriageId,
            name: this.name,
            politic: this.selectedZzmmId,
            salary: this.moneyNeed
          })
          .then((res) => {
            if (res.success) {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.$router.go(-1)
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              })
            }
          })
      }
    }
  }
}
</script>

<style lang="less">
#selectSex_dummy,
#selectExp_dummy,
#selectZzmm_dummy,
#selectMarriage_dummy,
#selectWh_dummy {
  display: none;
}
:focus-visible {
  outline: none;
}
.input-page {
  padding-bottom: 1rem;
  .input-group {
    padding: 0 0.3rem;
    .input-item {
      border-bottom: 1px solid #ddd;
      height: 0.9rem;
      line-height: 0.9rem;
      font-size: 0.28rem;
      .lable.require {
        padding-left: 0.2rem;
        position: relative;
      }
      .lable.require::before {
        content: '*';
        display: inline-block;
        color: #f60;
        font-size: 0.32rem;
        position: absolute;
        left: 0;
        top: 0.05rem;
      }
      .input-box {
        min-width: 2rem;
        text-align: right;
        input {
          line-height: 0.48rem;
          border: none;
          text-align: right;
        }
        input[disabled] {
          background: none;
        }
        .toSelect {
          color: #c7c4c4;
        }
      }
    }
  }
  .save-btn {
    width: 100%;
    height: 0.9rem;
    line-height: 0.9rem;
    background: #999;
    color: #fff;
    font-size: 0.32rem;
    margin-top: 0.4rem;
    border-radius: 0.08rem;
  }
  .save-btn.active {
    background: #4ca8fe;
  }
}
</style>
